<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <link rel="stylesheet" href="css/bootstrap.css">
    <style>
        .mylogin {
            width: 400px;
            padding: 50px;
            margin-top: 100px;
            border: solid #cccccc 1px;
            border-radius: 10px;
            background-color: rgba(220,38,38,0.1);
        }
    </style>
    <script>
        $(function(){

            $("#userName").keyup(function(){
                validateName();
            })
            $("#userPassword").keyup(function(){
                validatePassword1();
            })
            $("#formofme").submit(function(){
                return login();
            })
            $("#btnreset").click(function(){
                var listspan = $("span[id$=Msg]");
                for(var i=0;i<listspan.length;i++) {
                    $(listspan[i]).html("");
                }
            })
        })
        function validateName(){
            var userName = $("#userName").val();
            var nameMsg = $("#nameMsg");
            //4到16位（字母，数字，下划线，减号）
            var uPattern = /^[a-zA-Z0-9_-]{4,16}$/;
            if(userName!=null && userName!="") {
                if(userName.match(uPattern)){
                    nameMsg.html("符合规则.");
                    nameMsg.css("color","green");
                    return true;
                } else {
                    nameMsg.html("提示：4到16位<br>（字母，数字，下划线，减号）");
                    nameMsg.css("color","red");
                    return false;
                }
            } else {
                nameMsg.html("不能为空!");
                nameMsg.css("color","red");
                return false;
            }
        }
        function validatePassword1() {
            // 最少6位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符
            var password1 = $("#userPassword").val();
            var pwd1Msg = $("#pwd1Msg");
            var pPattern = /^.*(?=.{6,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$/;
            if(password1!=null && password1!="") {
                if(password1.match(pPattern)){
                    pwd1Msg.html("密码符合规则.");
                    pwd1Msg.css("color","green");
                    return true;
                } else {
                    pwd1Msg.html("提示：最少6位<br>包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符>");
                    pwd1Msg.css("color","red");
                    return false;
                }
            }else {
                pwd1Msg.html("不能为空!");
                pwd1Msg.css("color","red");
                return false;
            }
        }
        function login() {
            return validateName()&&validatePassword1();
        }
    </script>
</head>
<body>
    <div class="container mylogin">
        <h1 style="text-align: center;">登录</h1>
        <form  id="formofme" action="mylogin1" method="post" role="form"   >

            <div class="form-group ">
                <label for="userName" >*用户名：</label><input type="text" id="userName"name="userName"  class="form-control"   placeholder="请输入用户名"required /><span id="nameMsg" ></span>
            </div>
            <div class="form-group ">
                <label for="userPassword" >*密码：</label><input type="password" id="userPassword"name="userPassword" class="form-control " placeholder="请输入密码" required /><span id="pwd1Msg"></span>
            </div>
            <div class="btn">
                <button type="submit" class="btn btn-success">登录</button>
                <button id="btnreset" type="reset" class="btn btn-default" style="margin-left: 145px">重置</button>
            </div>

        </form>
    </div>

</body>
</html>